<HTML>
<HEAD>
<STYLE>
BODY                 { background-color: black;color: gold; font: 24pt sans-serif; }
UL                   { cursor: hand; }
UL LI                { display: none;font: 18pt;list-style: square; }
UL.showList LI       { display: block; }
.defaultStyles UL    { color: gold; }
UL.defaultStyles LI  { display: none; }
</STYLE>
</HEAD>
<BODY onselectstart="event.returnValue=false;">
<H2>Example: Expanding Table of Contents</H2>
<!-- This code takes advantage of event bubbling by cancelling the onselectstart 
event on the container instead of on each UL. -->

<UL onclick="this.className='showList';" 
	ondblclick="this.className='defaultStyles';"
    onmouseover="this.style.color='orange';"
	onmouseout="this.style.color='gold'">Part I: DHTML Text Features
    <LI><A HREF="about:blank.htm">Activating Text in Response to User Actions</A>
    <LI><A HREF="about:blank.htm">Showing Text on Demand Using the CSS DISPLAY Attribute</A>
    <LI><A HREF="about:blank.htm">Animating Text by Character and Whole Words</A>
</UL>
<UL onclick="this.className='showList';" 
    ondblclick="this.className='defaultStyles';"
    onmouseover="this.style.color='orange';"
	onmouseout="this.style.color='gold'">Part II: Filter Effects
    <LI><A HREF="about:blank.htm">Creating Interpage Transitions</A>
    <LI><A HREF="about:blank.htm">Layering Graphical Elements</A>
    <LI><A HREF="about:blank.htm">Using Paths to Create Flying Text</A>
    <LI><A HREF="about:blank.htm">Generating Sliding Text with CSS Positioning</A> 
</UL>
<UL onclick="this.className='showList';" 
    ondblclick="this.className='defaultStyles';"
	onmouseover="this.style.color='orange';"
	onmouseout="this.style.color='gold'">Part III: Conclusion
    <LI><A HREF="about:blank.htm">Closing Remarks</A>
</UL>
</BODY>
</HTML>